<template>
  <div class="summary-outline-wrap">
    <div class="summary-outline-btn">
      <div class="outline-btn-edit">
        <span v-show="!isEdit" class="mr20" @click="isEdit = true">编辑</span>
        <p class="mr20" v-show="isEdit">
          <span class="mr20" @click="saveHandler">保存</span>
          <span @click="cancelHandler">取消</span>
        </p>
      </div>
      <span class="export-btn" v-pdf="{ el: 'item-summary-p3', title: '定制信息' }">导出</span>
      <!-- <div class="print" v-print="{ el: `#gf`, popTitle: '定制信息' }">打印</div> -->
    </div>
    <div class="item-summary-p3">
      <div class="summary-outline-title">定制信息</div>
      <div id="gf">
        <div class="summary-outline-content">
          <Info :detail="detail" />
          <div class="summary-outline-table">
            <div class="summary-outline-table-title">
              <span> 硬件定制信息</span>
              <p class="custom-switch">
                <span v-if="!isEdit">{{ softWare.softwareNonStandard ? "有定制" : "无定制" }}</span>
                <el-switch
                  v-else
                  v-model="softWare.softwareNonStandard"
                  inactive-text="无"
                  active-text="有"
                  inline-prompt
                ></el-switch>
              </p>
            </div>
            <div class="summary-outline-custom">
              <div class="custom-title">
                <span>硬件定制周期（日）</span>
                <el-input
                  type="number"
                  v-model="softWare.hardwareCycle"
                  :disabled="!isEdit"
                  :class="{ 'custom-title-edit': isEdit }"
                  :placeholder="isEdit ? '请输入硬件定制周期（日）' : ''"
                />
              </div>
              <div class="custom-title mt10">
                <span>定制内容</span>
                <el-input
                  v-model="softWare.hardwareContent"
                  type="textarea"
                  rows="13"
                  :disabled="!isEdit"
                  :class="{ 'custom-title-edit': isEdit }"
                  :placeholder="isEdit ? '请输入定制内容' : ''"
                />
              </div>
            </div>
          </div>
          <div class="summary-outline-table summary-outline-ruan">
            <div class="summary-outline-table-title">
              <span>软件定制信息</span>
              <p class="custom-switch">
                <span v-if="!isEdit">{{ softWare.hardwareNonStandard ? "有定制" : "无定制" }}</span>
                <el-switch
                  v-else
                  v-model="softWare.hardwareNonStandard"
                  inactive-text="无"
                  active-text="有"
                  inline-prompt
                ></el-switch>
              </p>
            </div>
            <div class="summary-outline-custom">
              <div class="custom-title">
                <span>软件定制周期（日）</span>
                <el-input
                  type="number"
                  v-model="softWare.softwareCycle"
                  :disabled="!isEdit"
                  :class="{ 'custom-title-edit': isEdit }"
                  :placeholder="isEdit ? '请输入软件定制周期（日）' : ''"
                />
              </div>
              <div class="custom-title mt10">
                <span>定制内容</span>
                <el-input
                  v-model="softWare.softwareContent"
                  type="textarea"
                  rows="13"
                  :disabled="!isEdit"
                  :class="{ 'custom-title-edit': isEdit }"
                  :placeholder="isEdit ? '请输入定制内容' : ''"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, inject } from "vue";
import Info from "./Info.vue";
import { updateProjectSoftware } from "@/api/modules/project";
import mittBus from "@/utils/mittBus";
import { ElMessage } from "element-plus";

const projectId = inject("projectId");
// 变量
const props = defineProps({
  detail: {
    type: Object,
    default: () => {}
  }
});
const isEdit = ref(false);
const softWare = ref({
  hardwareCycle: "",
  hardwareContent: "",
  softwareCycle: "",
  softwareContent: "",
  softwareNonStandard: true,
  hardwareNonStandard: true
});
// 方法
const init = () => {
  softWare.value = {
    id: projectId,
    hardwareCycle: props.detail.hardwareCycle,
    hardwareContent: props.detail.hardwareContent,
    softwareCycle: props.detail.softwareCycle,
    softwareContent: props.detail.softwareContent,
    softwareNonStandard: props.detail.softwareNonStandard,
    hardwareNonStandard: props.detail.hardwareNonStandard
  };
};
const cancelHandler = () => {
  init();
  isEdit.value = false;
};
const saveHandler = async () => {
  try {
    await updateProjectSoftware(softWare.value);
    mittBus.emit("ProjectRefresh");
    isEdit.value = false;
    ElMessage.success("保存成功");
  } catch (e) {
    console.log(e);
  }
};
onMounted(() => {
  init();
});
</script>
<style lang="scss" scoped>
.summary-outline-wrap {
  box-sizing: border-box;
  min-height: 100%;
  padding: 20px;
  background: #ffffff;
  p {
    margin: 0;
  }
  .mr20 {
    margin-right: 20px;
  }
  .mt10 {
    margin-top: 10px;
  }
  .summary-outline-btn {
    display: flex;
    justify-content: flex-end;
    font-size: 16px;
    font-weight: 400;
    color: var(--el-color-primary);
    cursor: pointer;
    .outline-btn-edit {
      display: flex;
    }
  }
  .summary-outline-title {
    margin-top: 12px;
    margin-bottom: 60px;
    font-size: 26px;
    font-weight: 600;
    color: #333333;
    text-align: center;
  }
  .summary-outline-ruan {
    margin-top: 30px;
  }
  .summary-outline-content {
    margin: 0 $project-padding;
  }
  .summary-outline-table {
    overflow: hidden;
    &-title {
      display: flex;
      justify-content: space-between;
      height: 21px;
      margin-top: 10px;
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: 600;
      color: #333333;
      .custom-switch {
        :deep(.el-switch) {
          height: auto;
        }
        span:first-child {
          font-size: 14px;
          font-weight: 400;
        }
      }
    }
    .summary-outline-custom {
      box-sizing: border-box;
      height: 420px;
      padding: 20px;
      background: $project-background;
      .custom-title {
        font-size: 14px;
        font-weight: 400;
        color: #333333;
      }
      :deep(.el-input),
      :deep(.el-textarea) {
        margin-top: 10px;
        .el-input__wrapper {
          cursor: default;
          background-color: transparent;
          box-shadow: none;
          .el-input__inner {
            cursor: default;
          }
        }
        .el-textarea__inner {
          cursor: default;
          background-color: transparent;
          box-shadow: none;
        }
      }
      :deep(.custom-title-edit) {
        .el-input__wrapper {
          cursor: default;
          background-color: #ffffff;
          box-shadow: none;
          .el-input__inner {
            cursor: default;
          }
        }
        .el-textarea__inner {
          cursor: default;
          background-color: #ffffff;
          box-shadow: none;
        }
      }
    }
  }
  .summary-outline-other {
    margin-top: 30px;
  }
}
</style>
